<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div class="panel">
    <!--Panel heading-->
    <div id="processBrief-heading" class="panel-heading bg-gray-light">
        <div class="panel-control">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#processBrief-tab-1" data-toggle="tab">基本信息</a></li>
                <li><a href="#processBrief-tab-2" data-toggle="tab">流程步骤</a></li>
            </ul>
        </div>
        <h3 class="panel-title">流程简要</h3>
    </div>

    <!--Panel body-->
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane fade in active" id="processBrief-tab-1">
                <form id="form_processBrief_input" class="form-horizontal">
                    <input type="hidden" id="keyId" name="keyId" th:value="${processBrief?.id}" />
                    <input type="hidden" id="readAuthInputJson" name="readAuthInputJson" value="" />
                    <input type="hidden" id="editAuthInputJson" name="editAuthInputJson" value="" />

                    <div class="form-group">
                        <label class="col-md-3 control-label">流程名称<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <input type="text" name="name" id="name" th:value="${processBrief?.name}" class="form-control" placeholder="请输入流程名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">所属模块<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <input type="text" name="module" id="module" th:value="${processBrief?.module}" class="form-control" placeholder="请输入所属模块">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">操作表<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <input type="text" name="tableName" id="tableName" th:value="${processBrief?.tableName}" class="form-control" placeholder="请输入操作表">
                        </div>
                    </div>

                    <!-- ======================== 查看权限区域START ======================== -->
                    <div class="panel-heading header"><h3 class="panel-title">查看权限</h3></div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">是否所有人可查看<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <div class="radio">
                                <input type="radio" name="ifAllRead" id="ifAllRead0" value="0"  class="magic-radio" th:checked="${processBrief?.ifAllRead == 0}" />
                                <label for="ifAllRead0">否</label>
                                <input type="radio" name="ifAllRead" id="ifAllRead1" value="1" class="magic-radio" th:checked="${processBrief==null || processBrief?.ifAllRead == 1}"  />
                                <label for="ifAllRead1">是</label>
                            </div>
                        </div>
                    </div>

                    <div id="readAuthDiv" th:hidden="${processBrief==null || processBrief?.ifAllRead == 1}">
                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="department_select_brief('read')">部门</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="departmentNames" class="form-control" th:value="${readAuth?.departmentNames}" />
                                <input type="hidden" id="departmentIds" name="departmentIds" th:value="${readAuth?.departmentIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="post_select_brief('read')">岗位</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="postNames" class="form-control" th:value="${readAuth?.postNames}"/>
                                <input type="hidden" id="postIds" name="postIds" th:value="${readAuth?.postIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="power_select_brief('read')">职权</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="powerNames" class="form-control" th:value="${readAuth?.powerNames}" />
                                <input type="hidden" id="powerIds" name="powerIds" th:value="${readAuth?.powerIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="group_select_brief('read')">群组</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="groupNames" class="form-control" th:value="${readAuth?.groupNames}" />
                                <input type="hidden" id="groupIds" name="groupIds" th:value="${readAuth?.groupIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="user_select_brief('read')">用户</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="userNames" class="form-control" th:value="${readAuth?.userNames}" />
                                <input type="hidden" id="userIds" name="userIds" th:value="${readAuth?.userIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">域名</label>
                            <div class="col-md-7">
                                <select name="variable" id="variable" class="form-control" >
                                    <option value="">请选择</option>
                                    <option th:each="field : ${fieldNameList}" th:value="${field}" th:text="${field}" th:if="${#strings.startsWith(field, 'duty')}" th:selected="${readAuth?.variable == field}" ></option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <!-- ======================== 查看权限区域END ======================== -->


                    <!-- ======================== 编辑权限区域START ======================== -->
                    <div class="panel-heading header"><h3 class="panel-title">编辑权限</h3></div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">是否所有人可编辑<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <div class="radio">
                                <input type="radio" name="ifAllEdit" id="ifAllEdit0" value="0"  class="magic-radio" th:checked="${processBrief?.ifAllEdit == 0}" />
                                <label for="ifAllEdit0">否</label>
                                <input type="radio" name="ifAllEdit" id="ifAllEdit1" value="1" class="magic-radio" th:checked="${processBrief==null || processBrief?.ifAllEdit == 1}"  />
                                <label for="ifAllEdit1">是</label>
                            </div>
                        </div>
                    </div>

                    <div id="editAuthDiv" th:hidden="${processBrief==null || processBrief?.ifAllEdit == 1}">
                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="department_select_brief('edit')">部门</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="departmentNames" class="form-control" th:value="${editAuth?.departmentNames}" />
                                <input type="hidden" id="departmentIds" name="departmentIds" th:value="${editAuth?.departmentIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="post_select_brief('edit')">岗位</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="postNames" class="form-control" th:value="${editAuth?.postNames}"/>
                                <input type="hidden" id="postIds" name="postIds" th:value="${editAuth?.postIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="power_select_brief('edit')">职权</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="powerNames" class="form-control" th:value="${editAuth?.powerNames}" />
                                <input type="hidden" id="powerIds" name="powerIds" th:value="${editAuth?.powerIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="group_select_brief('edit')">群组</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="groupNames" class="form-control" th:value="${editAuth?.groupNames}" />
                                <input type="hidden" id="groupIds" name="groupIds" th:value="${editAuth?.groupIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <a href="javascript:void(0);" class="btn-link text-semibold" onclick="user_select_brief('edit')">用户</a>
                            </label>
                            <div class="col-md-7">
                                <input readonly type="text" id="userNames" class="form-control" th:value="${editAuth?.userNames}" />
                                <input type="hidden" id="userIds" name="userIds" th:value="${editAuth?.userIds}" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label">域名</label>
                            <div class="col-md-7">
                                <select name="variable" id="variable" class="form-control" >
                                    <option value="">请选择</option>
                                    <option th:each="field : ${fieldNameList}" th:value="${field}" th:text="${field}" th:if="${#strings.startsWith(field, 'duty')}" th:selected="${editAuth?.variable == field}" ></option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <!-- ======================== 编辑权限区域END ======================== -->


                </form>
            </div>
            <div class="tab-pane fade" id="processBrief-tab-2">
                <div class="row">
                    <div class="col-sm-12 table-toolbar-left">
                        <button id="btn_add_processStep" class="btn btn-primary btn-sm" onclick="processStep_add()">新增流程</button>
                    </div>
                </div>
                <div class="jqGrid_wrapper">
                    <table id="processStep_table"></table>
                    <div id="processStep_page"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">

    var data = {
        id : [[${processBrief.id}]],
        path : [[${processBrief.path}]]
    };

    $(function(){
        // __layX_adapt_height(data.id);
        init_grid_processStep();
    });

    function fn_processBrief_save(callback){
        createAuthInputJson("read");
        createAuthInputJson("edit");
        __confirm_dialog("", "确认保存吗？", function(){
            __form_save("form_processBrief_input", "/flow/processBrief/save", function(data){
                callback(data);
            })
        })
    }

    function init_grid_processStep(){
        __init_jqgrid('processStep_table', null, '/flow/processStep/list?path='+data.path,
            ['名称', '步骤号', "下一步", '操作', 'id'],
            [
                {name: 'name', index: 'name', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
                {name: 'step', index: 'step', width: 100, sortable: false, searchoptions: {sopt: ['eq']}},
                {name: 'nextStep', index: 'nextStep', width: 100, sortable: false, searchoptions: {sopt: ['eq']}},
                {name: 'act', index: 'act', width: 60, sortable: false, search: false, formatter: actFormat},
                {name: 'id', index: 'id', width: 100, key: true, hidden: true}
            ],false, {
                autowidth : false,
                loadComplete : function(){
                    setTimeout(function(){
                        __jqGrid_width("processStep_table", $("#processBrief-heading").width()-40);
                    },300);
                }
            }
        );
    }

    function actFormat(cellvalue, options, rowObject) {
        var id = rowObject.id;
        cellvalue = '<button class="btn btn-default btn-xs" onclick="processStep_add(\'' + id + '\');"><i class="fa fa-pencil-square-o"> </i> 编辑</button> ';
        return cellvalue;
    }

    function processStep_add(keyId){
        __layX_html_save(data.id+"-input", "", "/flow/processStep/input?path="+data.path+"&keyId="+keyId, function(id, button, event){
            var callback = function(data){
                if(data && data.state === 1){
                    __layX_close(id);
                    __reflash_jqgrid("processStep_table");
                }
            };
            fn_processStep_save(callback);
        },{
            shadable : 0.6
        })
    }


    // =========================== 查看权限 =================================

    //查看权限信息显示隐藏
    $(":radio[name='ifAllRead']").on("click", function(){
        if($(this).val() == 1){
            $("#readAuthDiv").hide();
        }else{
            $("#readAuthDiv").show();
        }
    });

    $(":radio[name='ifAllEdit']").on("click", function(){
        if($(this).val() == 1){
            $("#editAuthDiv").hide();
        }else{
            $("#editAuthDiv").show();
        }
    });

    function department_select_brief(type){
        var deptIds = $("#form_processBrief_input #"+type+"AuthDiv #departmentIds").val();
        __departments_dialog_select("processBrief_input_department_select", deptIds, function(data){
            __layX_close("processBrief_input_department_select");
            $("#form_processBrief_input #"+type+"AuthDiv #departmentNames").val(data.name);
            $("#form_processBrief_input #"+type+"AuthDiv #departmentIds").val(data.id);
        })
    }

    function post_select_brief(type){
        var postIds = $("#form_processBrief_input #"+type+"AuthDiv #postIds").val();
        var postNames = $("#form_processBrief_input #"+type+"AuthDiv #postNames").val();
        __posts_dialog_select("processBrief_input_post_select", postIds, postNames, function(data){
            $("#form_processBrief_input #"+type+"AuthDiv #postNames").val(data.names);
            $("#form_processBrief_input #"+type+"AuthDiv #postIds").val(data.ids);
            __layX_close("processBrief_input_post_select");
        });
    }

    function power_select_brief(type){
        var powerIds = $("#form_processBrief_input #"+type+"AuthDiv #powerIds").val();
        var powerNames = $("#form_processBrief_input #"+type+"AuthDiv #powerNames").val();
        __powers_dialog_select("processBrief_input_power_select", powerIds, powerNames, function(data){
            $("#form_processBrief_input #"+type+"AuthDiv #powerNames").val(data.names);
            $("#form_processBrief_input #"+type+"AuthDiv #powerIds").val(data.ids);
            __layX_close("processBrief_input_power_select");
        });
    }

    function group_select_brief(type){
        var groupIds = $("#form_processBrief_input #"+type+"AuthDiv #groupIds").val();
        var groupNames = $("#form_processBrief_input #"+type+"AuthDiv #groupNames").val();
        __groups_dialog_select("processBrief_input_group_select", groupIds, groupNames, function(data){
            $("#form_processBrief_input #"+type+"AuthDiv #groupNames").val(data.names);
            $("#form_processBrief_input #"+type+"AuthDiv #groupIds").val(data.ids);
            __layX_close("processBrief_input_group_select");
        });
    }

    function user_select_brief(type){
        var userIds = $("#form_processBrief_input #"+type+"AuthDiv #userIds").val();
        var userNames = $("#form_processBrief_input #"+type+"AuthDiv #userNames").val();
        __users_dialog_select("processBrief_input_user_select", userIds, userNames, function(data){
            $("#form_processBrief_input #"+type+"AuthDiv #userNames").val(data.names);
            $("#form_processBrief_input #"+type+"AuthDiv #userIds").val(data.ids);
            __layX_close("processBrief_input_user_select");
        });
    }

    function createAuthInputJson(type){
        var deptIds = $("#form_processBrief_input #"+type+"AuthDiv #departmentIds").val();
        var deptNames = $("#form_processBrief_input #"+type+"AuthDiv #departmentNames").val();
        var postIds = $("#form_processBrief_input #"+type+"AuthDiv #postIds").val();
        var postNames = $("#form_processBrief_input #"+type+"AuthDiv #postNames").val();
        var powerIds = $("#form_processBrief_input #"+type+"AuthDiv #powerIds").val();
        var powerNames = $("#form_processBrief_input #"+type+"AuthDiv #powerNames").val();
        var groupIds = $("#form_processBrief_input #"+type+"AuthDiv #groupIds").val();
        var groupNames = $("#form_processBrief_input #"+type+"AuthDiv #groupNames").val();
        var userIds = $("#form_processBrief_input #"+type+"AuthDiv #userIds").val();
        var userNames = $("#form_processBrief_input #"+type+"AuthDiv #userNames").val();
        var variable = $("#form_processBrief_input #"+type+"AuthDiv #variable option:selected").val();

        var obj = {};
        obj.departmentIds = deptIds ? deptIds : "";
        obj.departmentNames = deptNames ? deptNames : "";
        obj.postIds = postIds ? postIds : "";
        obj.postNames = postNames ? postNames : "";
        obj.powerIds = powerIds ? powerIds : "";
        obj.powerNames = powerNames ? powerNames : "";
        obj.groupIds = groupIds ? groupIds : "";
        obj.groupNames = groupNames ? groupNames : "";
        obj.userIds = userIds ? userIds : "";
        obj.userNames = userNames ? userNames : "";
        obj.variable = variable ? variable : "";
        $("#form_processBrief_input #"+type+"AuthInputJson").val(JSON.stringify(obj));
    }

</script>

</html>